<template>
  <div class="container">
	<mapDom v-if='zoomchanges==18'></mapDom>
	
    <el-amap class="amap-demo" vid="amap" viewMode="3D" isHotspot='true'
		:resizeEnable='true'
		:zoom="zoom" 
		:zooms='zooms'
		:plugin='plugin' 
		:center="center" 
		:pitch="66"
		:events="mapEvents">  

		<el-amap-marker
			v-for="(marker,index) in markers"
		    :position='marker.position'
			:autoMove='marker.autoMove'
			:icon='marker.icon'
			:key="index+'only1'"
			:events="marker.events"
			:title='marker.title'
			:zIndex='marker.zIndex'
		></el-amap-marker>
		<el-amap-polygon 
		 v-if='zoomchanges>16'
		v-for="(polygon, index) in polygons" 
		:vid="polygon" 
		:ref="`polygon_${index}`" 
		:rejectTexture="polygon.rejectTexture"
		
		
		:path="polygon.path" 
		:draggable="polygon.draggable" 
		:strokeOpacity='polygon.strokeOpacity'
		:strokeColor='polygon.strokeColor'
		:fillOpacity='polygon.fillOpacity'
		:events="polygon.events"
		
		:zIndex="polygon.zIndex"
		:bubble='polygon.bubble'
		:key="index+'polygon'"
		></el-amap-polygon>
		
    	<el-amap-text  v-if='zoomchanges==18'
			v-for="(text,index) in texts"
			:position="text.position"
			:key="index+'only2'"
			:events="text.events"
			:text='text.text'
			:offset='text.offset'
    	></el-amap-text>	
		<el-amap-info-window
			v-if="window"
			:position="window.position"
			:visible="window.visible"
			:content="window.content"
			:offset="window.offset"
		></el-amap-info-window>
    </el-amap>
  </div>
</template>

<script>
	
	import mapDom from './mapDom.vue'
  export default {
	components:{
		mapDom
	},
    data() {
      return {
		  // 天府广场
        center: [104.065861,30.657401],
		// 默认地图缩放比例
        zoom:10,
		// 地图缩放范围
		zooms:[10,18],
		// 监听到的缩放比例
		zoomchanges:null,
		// 初始化高德地图
		mapEvents: {},    
		// 
        markers: [],
		circles:[],
		polygons:[],
		texts:[],
        windows:[],
        window:'',
		// 插件  工具条
		plugin:[
			{
				pName: 'ToolBar',
				position:'LB',
				liteStyle:true,
				// locate:true,
				useNative:true,
				events: {
					init(instance){
						
					},
				} 
			},
			// {
			// 	pName: 'MapType',
			// 	defaultType: 0,
			// 	events: {
			// 		init(instance){
						
			// 		}
			// 	}        
			// }
		],   
		
      }
    },
	mounted(){
		// 暂时先这样   以此区分缩放比例不同下的数据展示
		this.point('dian')
		this.$nextTick(function(){
			setTimeout(()=>{
				// document.querySelector('.amap-overlay-text-container').style.backgroundColor=this.bg2()
			},1000)	
		})
		// this.num = document.querySelector('.amap-demo').getAttribute("data-zoom")
		let that =this 
		// 初始化高德地图
		that.mapEvents={
			init(o) {
				 o.setMapStyle("amap://styles/3ec734a9422064607faddbee848aeb65"); //自定义的高德地图的样式
			},
			zoomchange(e){
				
				
				that.zoomchanges=e.target.map.nb.mp
				
			}
		}
	},
	watch:{
		// 监听地图缩放
		'zoomchanges'(value){
			console.log(value)
			if(value==18){
				this.point('all')
			}else{
				this.point('dian')
			}
		}
	},
    methods:{ 
		// 随机背景色用于地区标识
		bg(){
			var r=Math.floor(Math.random()*256);
		    var g=Math.floor(Math.random()*256);
		    var b=Math.floor(Math.random()*256);
		    return "rgb("+r+','+g+','+b+")";//所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
		},  
		bg2(){
			var r=Math.floor(Math.random()*256);
		    var g=Math.floor(Math.random()*256);
		    var b=Math.floor(Math.random()*256);
		    return "rgba("+r+','+g+','+b+','+'0.5'+")";//所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
		},  
		   // 所统计数据后期调用接口直接拿到数据  
		  point(code){
			let markers = [];
			let circles = []
			let texts = []
			let windows=[]
			let polygons = []
			let that=this
			let pointMarker=[]
			if(code=='dian'){
				pointMarker=[
				{
					lng:104.072636,
					lat:30.657486,
					
					// 不限长度个数，此坐标为该社区每个角落的坐标
					path:[[104.072331,30.658017],[104.073404,30.657408],[104.072921,30.656789],[104.071912,30.657362]],
					title:"九龙广场",
					text: "九龙广场"
				},{
					lng:104.057815,
					lat:30.656951,
					
					// 不限长度个数，此坐标为该社区每个角落的坐标
					path:[[104.056312,30.659974],[104.058201,30.658285],[104.060518,30.656356],[104.060588,30.655487],[104.059655,30.655533],[104.059022,30.655672],[104.058625,30.654426],[104.055127,30.656715]],
					title:"人民公园",
					text: "人民公园"
				}
				]
			}else if(code=='all'){
				pointMarker=[
				{
					lng:104.057238,
					lat:30.655502,
					
					// 不限长度个数，此坐标为该社区每个角落的坐标
					path:[],
					title:"望圆公寓",
					text: "望圆公寓"
				},{
					lng:104.057174,
					lat:30.655948,
					
					// 不限长度个数，此坐标为该社区每个角落的坐标
					path:[],
					title:"少城茶庄",
					text: "少城茶庄"
				},{
					lng:104.057737,
					lat:30.656008,
					
					// 不限长度个数，此坐标为该社区每个角落的坐标
					path:[],
					title:"朝爽堂",
					text: "朝爽堂"
				},{
					lng:104.0594,
					lat:30.655957,
					
					// 不限长度个数，此坐标为该社区每个角落的坐标
					path:[],
					title:"忘舟亭",
					text: "忘舟亭"
				},{
					lng:104.072636,
					lat:30.657486,
					
					// 不限长度个数，此坐标为该社区每个角落的坐标
					path:[[104.072331,30.658017],[104.073404,30.657408],[104.072921,30.656789],[104.071912,30.657362]],
					title:"九龙广场",
					text: "九龙广场"
				},{
					lng:104.057815,
					lat:30.656951,
					
					// 不限长度个数，此坐标为该社区每个角落的坐标
					path:[[104.056312,30.659974],[104.058201,30.658285],[104.060518,30.656356],[104.060588,30.655487],[104.059655,30.655533],[104.059022,30.655672],[104.058625,30.654426],[104.055127,30.656715]],
					title:"人民公园",
					text: "人民公园"
				}
				]
			}
			
			pointMarker.forEach((item,index)=>{
				
				
			  markers.push({
				position: [item.lng,item.lat],
				zIndex:20,
				bubble:true,
				autoMove:true,
				title:item.title,
				icon: new AMap.Icon({            
				        image: 'https://hbbzw-image.oss-cn-beijing.aliyuncs.com/marker-1.gif',
				        size: new AMap.Size(60, 60),  //图标大小
						imageSize: new AMap.Size(60,60)
					  }),    
				events: {
				  click() {
					that.windows.forEach(window => {
					  window.visible = false; //关闭窗体
					});
					that.window = that.windows[index];
					that.zoom=18
					that.zoomchanges=18
					that.center=[item.lng,item.lat]
					that.$nextTick(() => {
					  that.window.visible = true;//点击点坐标，出现信息窗体
					});
				  }
				}
			  })
			  
			  polygons.push({
				draggable:false,
				strokeOpacity:1,
				strokeColor:this.bg(),
				fillOpacity:0,
				path:item.path,
				rejectTexture:true,//是否屏蔽自定义地图的纹理
				
			  	events: {
					click() {
									
					}
			  	}			
			  })
			  
			  texts.push({
				position: [item.lng,item.lat],
				// icon:item.url, //不设置默认蓝色水滴
				text:item.text,
				offset:[70,-10],//窗体偏移
				fillColor:this.bg(),		
				events: {
				  click() {
					// that.windows.forEach(window => {
					//   window.visible = false; //关闭窗体
					// });
					// that.window = that.windows[index];
					// that.$nextTick(() => {
					//   that.window.visible = true;//点击点坐标，出现信息窗体
					// });
				  }
				}
			  })
			  
			  windows.push({
				position: [item.lng,item.lat],
				content:"<div class='mapMsg'>"+item.title+"</div>",//内容
				offset:[-20,-30],//窗体偏移
				visible: false//初始是否显示
			  })
			})
			//  加点
			this.markers = markers;
			// 覆盖层
			this.circles = circles
			this.polygons = polygons
			
			// 文本
			this.texts = texts
			//加弹窗
			this.windows=windows
		  },
    },
   
  }
  
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss">
	.container{
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: relative;
		padding: 0;
		margin: 0;
	}
	.amap-marker-content{
		
	}
	.amap-overlay-text-container{
		border: solid rgba(63,178,255,0.8) 2px;
		color: #fff;
		border-radius: 10px;
		background-color: rgba(63,178,255,0.5);
	}
	.amap-info-content{
		border: solid rgba(63,178,255,0.8) 2px;
		color: #fff;
		border-radius: 10px;
		background-color: rgba(63,178,255,0.5);
	}
	.amap-info-sharp{
		bottom: -10px !important;
		border-left:40px solid transparent !important;
		border-right: none;
		border-top: 20px solid rgba(63,178,255,0.5) !important;
	}
	.mapMsg{
		width: 100px;
		height: 100px;
	}
	.amap-info-close{
		position: absolute;
		right: 0;
		top: 0;
		
	}
</style>